<template xmlns="http://www.w3.org/1999/html">
    <div class="common-layout bg content">
        <el-container>
            <el-header :style="{ height: '15vh' }">
                <div>
                  <!-- 第一行导航 -->
                  <ElRow :gutter="20" class="header-row">
                    <ElCol :span="6">
                      <div class="center-content">
                      <img src="../assets/imgs/HomeLogo1.png" width="400px" height="100px">
                      </div>
                    </ElCol>
                    <ElCol :span="12" class="titleName">滨海机场航班后台管理平台</ElCol>
                    <ElCol :span="6">
                      <div class="head-right">
                              <dropdown></dropdown>
                          </div>
                    </ElCol>
                  </ElRow>
                </div>
            </el-header>

            <el-main :style="{ height: '85vh' } ">
                <el-row :style="{ height: '75vh' }">
                    <el-col :span="3" :style="{ height: '75vh' }">
<!--                        使用vip登录的所需组件-->
                        <sidebar class="tac1"></sidebar>
                    </el-col>
                    <el-col :span="21"  :style="{ height: '75vh' }" style="padding: 20px; background-color: rgba(255,255,255,0.6);">
                        <app ></app>
                    </el-col>
                </el-row>
            </el-main>

        </el-container>
    </div>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import Sidebar from '../component/Sidebar.vue'
import App from '../App.vue'
import {router} from "../common/router.js";
import Dropdown from '../component/Dropdown.vue'

//首页刷新就加载info页面
onMounted(() => {
  router.push('/vip/info')
})
// 直接声明响应式状态
const tabPosition = ref('left')
// 直接声明数据
const searchKeyword = ref('') // 用于存储用户输入的搜索关键词
const bookingInfo = ref({
  departure: '',
  destination: '',
  startDate: null,
  passengerCount: 1,
})

// 计算属性
const filteredImages = computed(() => {
  // 根据 searchKeyword 过滤 images
  return images.value.filter(image => image.alt.includes(searchKeyword.value))
})

</script>

<style scoped>
/*标题样式*/
.titleName{
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
    color: #4d4141;
    text-align: center;
    font-weight: bold;
    margin-top: 40px;
}

/*    */
    .bg {
        width: 100%;
        position: fixed; /* 添加此行使背景图固定 */
        top: 0; /* 添加此行使背景图从顶部开始 */
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url("../assets/imgs/bg.png");
        background-size: cover; /* 添加此行使背景图自适应容器 */
        background-position: center; /* 添加此行使背景图居中显示 */
        background-attachment: fixed;
    }
    /*头部logo样式*/
    .center-content{
      width: 100%;
      background-size: cover;
      float: left;
    }
    /*登陆注册按钮样式*/
    .head-right{
      margin: 20px 30px auto auto;
      width: 223px;
    }
    /* 以下样式用于确保内容区域在背景图之上 */
    .common-layout > el-container {
        position: relative; /* 添加此行使子元素相对于此容器定位 */
        z-index: 1; /* 添加此行确保内容区域在背景之上 */
    }
    .common-layout {
      /* 添加滚动条样式 */
      overflow-y: auto; /* 启用垂直滚动条，当内容溢出时 */
       /*overflow-x: hidden; !*可选，隐藏水平滚动条，如果你不希望有水平滚动 *!*/
    }
    /*走马灯样式设计*/
    /*<style scoped>*/
    .el-carousel__item h3 {
      display: flex;
      color: #475669;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
      background: white;
    }
    /*主部分左侧设计*/
    .demo-tabs > .el-tabs__content {
      padding: 32px;
      color: #6b778c;
      font-size: 32px;
      font-weight: 600;
      text-align: center;
    }

    .el-tabs--right .el-tabs__content,
    .el-tabs--left .el-tabs__content {
      height: 100%;
    }
    .header-row {
      margin: 0px ;
    }
    .center-content {
      text-align: center;
      line-height: 50px; /* 调整以适应你的导航高度 */
    }

</style>
